<template>
    <div class="order">
        <span class="line"></span>
        <span class="txt">{{ props.content }}</span>
        <span class="line"></span>
    </div>
</template>
<script setup lang="ts">
defineOptions({
    name: "divider-text"
})
const props = defineProps({
    content: {
        type: String,
        default: '分割线'
    }
})
</script>
<style lang="scss" scoped>
.order {
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
}

.order .line {
    display: inline-block;
    border-top: 1px solid #ccc;
    width: calc(30% - 20rpx);
}

.order .txt {
    color: #686868;
    vertical-align: middle;
    padding: 0 20rpx;
}
</style>